<template>
  <el-form label-width="80px" :model="formData" :rules="rules" ref="form">
    <div id="picker">
      <picker v-model:radio="radio" :name1="name1" :name2="name2"></picker>
    </div>
    <div class="right">
      <div>
        <date-picker
          size="small"
          type="出发时间"
          prop="departureDate"
          v-model:dateTime="formData.departureDate"
          @change="select()"
        ></date-picker>
      </div>
      <div v-show="radio">
        <flight-no-picker
          v-model:flightId="flightId"
          size="small"
        ></flight-no-picker>
      </div>
      <div v-show="!radio">
        <city-picker
          size="small"
          prop="arriveCity"
          type="到达城市"
          :cityList="cityListArr"
          placeholder="到达城市"
          v-model:currCityName="formData.arriveCity"
        ></city-picker>
      </div>
      <div v-show="!radio">
        <el-button
          class="form-btn-switch"
          @click="exchangeCity"
          circle
        ></el-button>
      </div>
      <div v-show="!radio">
        <city-picker
          size="small"
          prop="departureCity"
          type="出发城市"
          :cityList="cityListArr"
          placeholder="出发城市"
          v-model:currCityName="formData.departureCity"
        ></city-picker>
      </div>
    </div>
    <el-row>
      <flight-list></flight-list>
    </el-row>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch, onMounted } from 'vue';
import Picker from '../../components/Picker.vue';
import CityPicker from '../../components/CityPicker.vue';
import DatePicker from '../../components/DatePicker.vue';
import FlightNoPicker from '../../components/FlightNoPicker.vue';
import FlightList from '../../components/FlightList.vue';
import { FlightService } from '@/utils/api/flight';

export default defineComponent({
  name: 'FlightSearch',
  components: {
    Picker,
    CityPicker,
    DatePicker,
    FlightNoPicker,
    FlightList,
  },
  setup() {
    const formData = ref({
      departureCity: '',
      arriveCity: '',
      departureDate: new Date(),
    });
    const name1 = '按航班号';
    const name2 = '按出发地';
    const radio = ref(true);
    const flightId = ref('');
    const cityListArr = reactive({
      hot: [{ id: 111111, name: '北京市' }],
      A: [{ id: 111111, name: '安阳市' }],
      B: [{ id: 111111, name: '北京市' }],
      H: [{ id: 111111, name: '杭州市' }],
    });
    const exchangeCity = () => {
      [formData.value.departureCity, formData.value.arriveCity] = [
        formData.value.arriveCity,
        formData.value.departureCity,
      ];
    };
    //自定义验证器
    const validateCity = (rule: any, value: string, callback: Function) => {
      if (value === '') {
        callback(new Error('城市不可空!'));
      } else {
        if (formData.value.arriveCity == formData.value.departureCity) {
          callback(new Error('不能为同一城市!'));
        } else {
          callback();
        }
      }
    };
    const validateDepartureDate = (
      rule: any,
      value: Date,
      callback: Function
    ) => {
      if (value === null) {
        callback(new Error('出发时间不可为空!'));
      } else {
        const today = new Date();
        //让当天时间加1
        if (
          today >
          new Date(
            (formData.value.departureDate as any).getTime() + 3600 * 1000 * 24
          )
        ) {
          callback(new Error('出发时间过早!'));
        } else {
          callback();
        }
      }
    };
    //表单数据验证
    const form = ref(null);
    const rules = {
      departureCity: [
        { required: true, message: '城市不可空!', trigger: 'change' },
      ],
      arriveCity: [{ validator: validateCity, trigger: 'change' }],
      departureDate: [{ validator: validateDepartureDate, trigger: 'change' }],
    };
    const select = () => {
      FlightService.selectSpecificFlightByDate({
        flightId: flightId.value,
        departureDate: formData.value.departureDate,
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    };
    //这里接口还有没对上的,应该还需要一个
    onMounted(() => {
      select();
    });
    watch(
      () => radio.value,
      () => {
        select();
      }
    );
    watch(
      () => flightId.value,
      () => {
        select();
      }
    );
    watch(
      () => formData.value.departureCity,
      () => {
        select();
      }
    );
    watch(
      () => formData.value.arriveCity,
      () => {
        select();
      }
    );
    // const onSubmit = () => {
    //   (form.value as any).validate((valid: boolean) => {
    //     if (valid) {
    //       alert('submit!');
    //     } else {
    //       console.log('error submit!!');
    //       return false;
    //     }
    //   });
    // };
    return {
      formData,
      form,
      rules,
      // onSubmit,
      radio,
      name1,
      name2,
      flightId,
      cityListArr,
      exchangeCity,
      select,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
#picker {
  margin-left: 0px;
  margin-top: -5px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 40px;
}
.right {
  float: right;
  height: 50px;
  line-height: 50px;
  margin-right: -130px;
  margin-top: -80px;
  div {
    float: right;
    margin-left: 2px;
    margin-right: -2px;
  }
}
//input
:deep(.el-input__inner) {
  width: 75px;
  margin: 0;
  padding-left: 10px;
  padding-right: 0;
}
:deep(.el-date-editor) {
  margin-right: 20px;
  .el-input__inner {
    width: 125px;
    padding-left: 24px;
  }
  .el-input__prefix,
  .el-input__suffix {
    left: 2px !important;
  }
}
:deep(.el-select) {
  .el-input__inner {
    width: 125px;
  }
}
.form-btn-switch {
  background: url('~@/assets/img/switch.png') center no-repeat;
  width: 30px;
  margin-left: 14px;
  margin-right: -5px;
  padding: 0;
  float: left;
  border: none;
  background-size: 30px 30px;
  margin-top: -5px;
}
.el-row {
  margin-left: 15px;
  margin-top: -30px;
  line-height: 20px !important;
}
//红字位置
.el-form-item--small .el-form-item__error {
  left: -16px;
}
</style>
